package cn.mujiankeji.mbrowser.界面.标签页.历史

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsTopHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Edit

import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Search

import androidx.compose.material3.Checkbox
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Divider
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import cn.mujiankeji.mbrowser.app.应用接口
import cn.mujiankeji.mbrowser.app.应用路由
import cn.mujiankeji.mbrowser.数据.数据库.DBHistory
import cn.mujiankeji.mbrowser.工具.操作.地址操作
import cn.mujiankeji.mbrowser.界面.图标.MyIconPack
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.Html
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.网格列表
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.菜单

import kotlinx.coroutines.flow.first
import kotlinx.coroutines.launch
import kotlinx.datetime.Clock
import kotlinx.datetime.Instant
import kotlinx.datetime.TimeZone
import kotlinx.datetime.toLocalDateTime
import 界面.弹窗.下拉菜单
import 界面.弹窗.下拉菜单分割线
import 界面.弹窗.下拉菜单项目

/**
 * 历史标签页实现
 * 显示浏览器的历史记录，支持搜索、筛选和管理
 */
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun 历史标签实现(state: 历史标签状态) {
    val scope = rememberCoroutineScope()
    
    // 获取历史记录数据
    LaunchedEffect(
        state.搜索关键字.value,
        state.时间筛选.value
    ) {
        state.加载状态.value = true
        
        val daoHistory = state.db().历史()
        val 历史记录列表 = if (state.搜索关键字.value.isNotEmpty()) {
            // 搜索模式
            daoHistory.搜索历史记录(state.搜索关键字.value).first()
        } else {
            // 根据时间筛选
            val 时间范围 = state.获取时间范围(state.时间筛选.value)
            if (state.时间筛选.value == 时间筛选类型.全部) {
                daoHistory.获取所有历史记录().first()
            } else {
                daoHistory.获取指定时间段历史记录(时间范围.first, 时间范围.second).first()
            }
        }
        
        state.历史记录列表.value = 历史记录列表
        state.分组历史记录.value = state.分组历史记录(历史记录列表)
        state.加载状态.value = false
    }
    
    val 历史记录列表 by state.历史记录列表.collectAsState()
    val 分组历史记录 by state.分组历史记录.collectAsState()

    Column(modifier = Modifier.fillMaxSize()) {
        // 顶部工具栏
        历史标签顶部工具栏(state, scope)
        
        // 内容区域
        Box(modifier = Modifier.weight(1f)) {
            if (state.加载状态.value) {
                // 显示加载指示器
                CircularProgressIndicator(
                    modifier = Modifier.align(Alignment.Center)
                )
            } else if (历史记录列表.isEmpty()) {
                // 显示空状态
                Text(
                    text = "没有历史记录",
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.align(Alignment.Center)
                )
            } else {
                // 显示历史记录列表
                if (state.视图模式.value == 历史视图模式.列表) {
                    if (state.是否显示时间分组.value) {
                        // 分组显示
                        分组历史记录列表(state, 分组历史记录)
                    } else {
                        // 平铺显示
                        普通历史记录列表(state, 历史记录列表)
                    }
                } else {
                    // 网格视图（可以在这里实现网格布局）
                    Text(
                        text = "网格视图（待实现）",
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.align(Alignment.Center)
                    )
                }
            }
        }
    }
}

/**
 * 历史标签顶部工具栏
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun 历史标签顶部工具栏(state: 历史标签状态, scope: kotlinx.coroutines.CoroutineScope) {
    var 显示菜单 by remember { mutableStateOf(false) }
    var 显示时间筛选菜单 by remember { mutableStateOf(false) }
    
    Surface(
        shadowElevation = 4.dp
    ) {
        if (state.是否搜索模式.value) {
            // 搜索模式工具栏
            Row(
                modifier = Modifier
                    .windowInsetsTopHeight(WindowInsets.statusBars)
                    .fillMaxWidth()
                    .height(56.dp)
                    .padding(horizontal = 8.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                IconButton(onClick = {
                    state.搜索关键字.value = ""
                    state.是否搜索模式.value = false
                }) {
                    Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                }
                
                OutlinedTextField(
                    value = state.搜索关键字.value,
                    onValueChange = { state.搜索(it) },
                    placeholder = { Text("搜索历史记录") },
                    modifier = Modifier
                        .weight(1f)
                        .padding(horizontal = 8.dp),
                    singleLine = true,
                    trailingIcon = {
                        if (state.搜索关键字.value.isNotEmpty()) {
                            IconButton(onClick = { state.搜索关键字.value = "" }) {
                                Icon(Icons.Default.Close, contentDescription = "清除")
                            }
                        }
                    }
                )
            }
        } else if (state.是否编辑模式.value) {
            // 编辑模式工具栏
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .windowInsetsTopHeight(WindowInsets.statusBars)
                    .height(56.dp)
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = "已选择 ${state.选中条目ID列表.value.size} 项",
                    style = MaterialTheme.typography.titleMedium
                )
                
                Row {
                    IconButton(onClick = {
                        scope.launch {
                            state.删除选中历史记录()
                        }
                    }) {
                        Icon(Icons.Default.Delete, contentDescription = "删除")
                    }
                    
                    IconButton(onClick = { state.切换编辑模式() }) {
                        Icon(Icons.Default.Close, contentDescription = "取消")
                    }
                }
            }
        } else {
            // 正常模式工具栏
            TopAppBar(
                title = { Text("历史记录") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.surface
                ),
                actions = {
                    // 搜索按钮
                    IconButton(onClick = { state.是否搜索模式.value = true }) {
                        Icon(Icons.Default.Search, contentDescription = "搜索")
                    }
                    
                    // 视图模式切换按钮
                    /*IconButton(onClick = {
                        state.视图模式.value = if (state.视图模式.value == 历史视图模式.列表) {
                            历史视图模式.网格
                        } else {
                            历史视图模式.列表
                        }
                    }) {
                        if (state.视图模式.value == 历史视图模式.列表) {
                            Icon(MyIconPack.网格列表, contentDescription = "网格视图")
                        } else {
                            Icon(MyIconPack.菜单, contentDescription = "列表视图")
                        }
                    }
                    */
                    // 编辑按钮
                    IconButton(onClick = { state.切换编辑模式() }) {
                        Icon(Icons.Default.Edit, contentDescription = "编辑")
                    }
                    
                    // 菜单按钮
                    Box {
                        IconButton(onClick = { 显示菜单 = !显示菜单 }) {
                            Icon(Icons.Default.MoreVert, contentDescription = "更多选项")
                        }
                        
                        DropdownMenu(
                            expanded = 显示菜单,
                            onDismissRequest = { 显示菜单 = false }
                        ) {
                            DropdownMenuItem(
                                text = { Text("时间筛选") },
                                onClick = {
                                    显示时间筛选菜单 = true
                                    显示菜单 = false
                                },
                                trailingIcon = {
                                    Text(
                                        text = when(state.时间筛选.value) {
                                            时间筛选类型.全部 -> "全部"
                                            时间筛选类型.今天 -> "今天"
                                            时间筛选类型.昨天 -> "昨天"
                                            时间筛选类型.最近七天 -> "最近七天"
                                            时间筛选类型.最近三十天 -> "最近三十天"
                                        },
                                        style = MaterialTheme.typography.bodySmall
                                    )
                                }
                            )
                            
                            DropdownMenuItem(
                                text = { Text(if (state.是否显示时间分组.value) "取消分组显示" else "按时间分组显示") },
                                onClick = {
                                    state.是否显示时间分组.value = !state.是否显示时间分组.value
                                    显示菜单 = false
                                }
                            )

                            下拉菜单分割线()


                            DropdownMenuItem(
                                text = { Text("清空历史记录") },
                                onClick = {
                                    scope.launch {
                                        state.清空历史记录()
                                    }
                                    显示菜单 = false
                                }
                            )
                        }
                        
                        // 时间筛选子菜单
                        DropdownMenu(
                            expanded = 显示时间筛选菜单,
                            onDismissRequest = { 显示时间筛选菜单 = false }
                        ) {
                            下拉菜单项目("全部") {
                                state.时间筛选.value = 时间筛选类型.全部
                                显示时间筛选菜单 = false
                            }
                            下拉菜单项目("今天") {
                                state.时间筛选.value = 时间筛选类型.今天
                                显示时间筛选菜单 = false
                            }
                            下拉菜单项目("昨天") {
                                state.时间筛选.value = 时间筛选类型.昨天
                                显示时间筛选菜单 = false
                            }
                            下拉菜单项目("最近七天") {
                                state.时间筛选.value = 时间筛选类型.最近七天
                                显示时间筛选菜单 = false
                            }
                            下拉菜单项目("最近三十天") {
                                state.时间筛选.value = 时间筛选类型.最近三十天
                                显示时间筛选菜单 = false
                            }
                        }
                    }
                }
            )
        }
    }
}

/**
 * 分组历史记录列表
 */
@Composable
fun 分组历史记录列表(state: 历史标签状态, 分组历史记录: Map<String, List<DBHistory>>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        // 按时间分组显示历史记录
        分组历史记录.forEach { (分组标题, 历史记录列表) ->
            // 分组标题
            item {
                Text(
                    text = 分组标题,
                    style = MaterialTheme.typography.titleMedium,
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(MaterialTheme.colorScheme.surface)
                        .padding(horizontal = 16.dp, vertical = 8.dp)
                )
            }
            
            // 分组内容
            items(历史记录列表, key = { it.id }) { 历史记录 ->
                历史记录项目(state, 历史记录)
            }
        }
    }
}

/**
 * 普通历史记录列表（不分组）
 */
@Composable
fun 普通历史记录列表(state: 历史标签状态, 历史记录列表: List<DBHistory>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(历史记录列表, key = { it.id }) { 历史记录 ->
            历史记录项目(state, 历史记录)
        }
    }
}

/**
 * 格式化相对时间
 */
fun 格式化相对时间(时间戳: Long): String {
    val 当前时间 = Clock.System.now().toEpochMilliseconds()
    val 一天毫秒数 = 24 * 60 * 60 * 1000L
    val 一小时毫秒数 = 60 * 60 * 1000L
    val 一分钟毫秒数 = 60 * 1000L
    
    val 差值 = 当前时间 - 时间戳
    
    return when {
        差值 < 一分钟毫秒数 -> "刚刚"
        差值 < 一小时毫秒数 -> "${差值 / 一分钟毫秒数}分钟前"
        差值 < 一天毫秒数 -> "${差值 / 一小时毫秒数}小时前"
        差值 < 7 * 一天毫秒数 -> "${差值 / 一天毫秒数}天前"
        else -> {
            val instant = Instant.fromEpochMilliseconds(时间戳)
            val localDateTime = instant.toLocalDateTime(TimeZone.currentSystemDefault())
            "${localDateTime.year}/${localDateTime.monthNumber}/${localDateTime.dayOfMonth}"
        }
    }
}

/**
 * 单个历史记录项目
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun 历史记录项目(state: 历史标签状态, 历史记录: DBHistory) {
    val 是否选中 = state.选中条目ID列表.value.contains(历史记录.id)
    
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .combinedClickable(
                onClick = {
                    if (state.是否编辑模式.value) {
                        state.切换选中状态(历史记录.id)
                    } else {
                        // 打开历史记录网页
                        应用路由.加载(历史记录.网址)
                    }
                },
                onLongClick = {
                    if (!state.是否编辑模式.value) {
                        state.切换编辑模式()
                        state.切换选中状态(历史记录.id)
                    }
                }
            )
            .padding(horizontal = 16.dp, vertical = 8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        if (state.是否编辑模式.value) {
            // 复选框
            Checkbox(
                checked = 是否选中,
                onCheckedChange = { state.切换选中状态(历史记录.id) }
            )
        }
        
        // 网站图标
        Box(
            modifier = Modifier
                .size(40.dp)
                .clip(MaterialTheme.shapes.small)
                .background(MaterialTheme.colorScheme.surfaceVariant),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = MyIconPack.Html,
                contentDescription = null,
                modifier = Modifier.size(24.dp)
            )
        }
        
        Spacer(modifier = Modifier.width(16.dp))
        
        // 标题和URL
        Column(
            modifier = Modifier.weight(1f)
        ) {
            Text(
                text = 历史记录.标题,
                style = MaterialTheme.typography.titleSmall,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
            
            Spacer(modifier = Modifier.height(4.dp))
            
            Text(
                text = 历史记录.网址,
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
        
        if (!state.是否编辑模式.value) {
            // 访问时间
            Text(
                text = 格式化相对时间(历史记录.添加时间),
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.padding(start = 8.dp)
            )
        }
    }
    
    Divider(
        modifier = Modifier.padding(start = 16.dp),
        color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.3f)
    )
} 